<template>
  <div class="home-container">
    <!-- 头部导航 -->
    <van-nav-bar
      class="page-nav-bar"
      title="搜索"
      fixed
    >
    <van-button
      class="search-btn"
      slot="title"
      type="info"
      size="small"
      round
      icon="search"
      @click="$router.push('/search')"
    >
      搜索
    </van-button>
    </van-nav-bar>
    <!-- 导航栏 -->
    <!-- 频道列表 -->
    <van-tabs class="channel-tabs" v-model="active" animated swipeable>
      <van-tab v-for="item in channels" :key="item.id" :title="item.name">
        <ArticleList :channel="item"/>
      </van-tab>
      <div slot="nav-right" class="placeholder"></div>
      <div class="hamburger-btn" slot="nav-right" @click="showPopup">
        <i class="iconfont icon-gengduo"></i>
      </div>
    </van-tabs>
    <!-- 频道列表 -->
    <!-- 频道编辑 -->
    <van-popup
      class="edit-channel-popup"
      v-model="isEditChannelShow"
      position="bottom"
      :style="{ height: '100%' }"
      closeable
      close-icon-position="top-left"
    >
      <ChannelEdit @deleteMyChannels="deleteMyChannels" :user-channels="channels"  :active-index1.sync="active" :active-index="active" @close-popup="isEditChannelShow=false"/>
    </van-popup>
    <!-- /频道编辑 -->
  </div>
</template>

<script>
import { getUserChannels } from '@/api/user'
import { deleteUserChannel } from '@/api/article'
import ArticleList from './components/article-list/index.vue'
import ChannelEdit from './components/channel-edit/index.vue'
import { mapState } from 'vuex'
export default {
  name: 'HomePage',
  // components: {},
  components: { ArticleList, ChannelEdit },
  props: {},
  data () {
    return {
      active: 0,
      channels: [], // 频道列表
      isEditChannelShow: false // 这里我们先设置为 true 就能看到弹窗的页面了
    }
  },
  computed: {
    ...mapState(['user'])
  },
  watch: {},
  created () {
    this.loadUserChannels()
  },
  mounted () {},
  methods: {
    // 获取用户自己的信息
    async loadUserChannels () {
      // try {
      //   const { data } = await getUserChannels()
      //   this.channels = data.data.channels
      // } catch (err) {
      //   this.$toast('获取频道数据失败')
      // }
      // const channels = []
      try {
        // let channels = []
        if (this.user) {
          const { data } = await getUserChannels()
          this.channels = data.data.channels
        } else {
          const localChannels = JSON.parse(window.localStorage.getItem('channels'))
          if (localChannels) {
            this.channels = localChannels
          } else {
            const { data } = await getUserChannels()
            this.channels = data.data.channels
          }
        }
      } catch (err) {
        this.$toast('数据获取失败')
      }
    },
    async deleteMyChannels () {
      const [id] = arguments
      if (id === 0) return
      this.channels = this.channels.filter(item => item.id !== id)
      if (!this.user) return window.localStorage.setItem('channels', JSON.stringify(this.channels))
      try {
        await deleteUserChannel(id)
        // console.log(res)
      } catch (err) {
        console.log(err)
      }
    },
    showPopup () {
      this.isEditChannelShow = true
    }
  }
}
</script>

<style lang='less' scoped>
  .home-container{
    padding-top: 174px;
  /deep/ .van-nav-bar__title{
        max-width: unset;
        .search-btn{
        width: 555px;
        height: 64px;
        background-color: #5babfb;
        border: none;
        font-size: 28px;
        i.van-icon {
          font-size: 32px;
          color: #fff;
        }
      }
    }
    /deep/ .channel-tabs{
      .van-tabs__wrap{
          // height: 82px;
          // position: fixed;
          // top: 92px;
          // z-index: 1;
          margin-top: -92px;
          .van-tabs__nav {
            padding: 0 0 15px;
          }
          .van-tabs__nav{
            padding: 0;
          }
      }
      .van-tab{
        min-width: 200px;
        border-right: 1px solid #edeff3;
        font-size: 30px;
        color: #777
      }
      .van-tab--active{
        color: #333;
      }
      .van-tabs__line{
        width: 31px;
        height: 6px;
        background-color: #3296fc;
        bottom: 8px;
      }
      .hamburger-btn{
        position: fixed;
        right: 0;
        width: 66px;
        height: 82px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #fff;
        opacity: 0.902;
        i.iconfont{
          font-size: 33px;
        }
        &::before{
          content: '';
          position: absolute;
          left: 0;
          width: 3px;
          height: 100%;
          background: url('~@/assets/images/gradient-gray-line.png');
          background-size: contain;
        }
      }
    }
    .placeholder{
      width: 66px;
      height: 82px;
      flex-shrink: 0;
    }
    .edit-channel-popup{
      padding-top: 100px;
      box-sizing: border-box;
    }
  }
</style>
